iT邦幫忙

DAY 12
0

當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統系列 第 12

[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(12)–繼續完善新增.修改.刪除功能-2

  • 分享至 

  • xImage
  •  

* 本篇目標

接續上一篇,繼續完成Angular.js的新增.編輯功能

* 上篇回顧

上篇我們依序從BLL.Web API,完成NG的Service call Web API,並在前端的Grid新增了編輯.刪除按鈕,此篇會接續來完成新增.編輯功能,以下是上一篇的最後一張圖。

* 新增

因為是SPA頁面,我們會先增一個AddCustomer.html來定義template,藉由ng-model來指定我們的ViewModel欄位。這個html的內容會替換前幾篇我們所定義的ng-view div的內容。

透過NG的Route,在最上層的app.js我們可以指定連結為/Customer/Add時指定為Contoller使用CustAddCtrl,html template使用為AddCustomer.html

畫面瀏覽:

新增一個customerAddController.js,基本上邏輯不會太複雜,故用註解來解釋

* 編輯

同樣,我們新增一個EditCustomer.html

customerEditController.js,這邊又用到一個NG的新東西,因編輯我們透過QueryString來傳遞客戶的ID,$routeParams可以讓我們很方便的去取得參數

* 後記

雖然jQuery程式很精簡好懂,NG則學習曲線較高,但jQuery跟html的耦合性太高,實務上我們常常會遇到一些鳥事,譬如設計師UI大改,客戶功能需求變更...等等,Angular.js將各"職責”分開,html跟srcipts完全不會有衝突,網頁設計師只要給他新的版,我們再套上NG所對應的ng-model即可,而需求變更我也會很清楚的知道要開哪個檔案去擴充。

我們基本上把改有的功能都帶過了,下面幾篇預計就活用前10幾篇的技術,繼續完成我們的需求!

本系列程式原始碼請至我的Github下載 https://github.com/kyleap

** 如內容有誤請告知,將進行修改,謝謝 **


上一篇
[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(11)–繼續完善新增.修改.刪除功能-1
下一篇
[鐵人30天]當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統(13) - 複習 - 1
系列文
當ASP.NET MVC 遇見 Angular.js MVC 客戶管理系統30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言